<template>
	<view class="sun-page">
		<view class="form-box">
			<view class="form-title">{{t("user.authentication")}}</view>
			<u-line class="custom-line"></u-line>
			<view class="form-main">
				<u-form ref="form" :model="state.form" :rules="state.rules">
					<u-form-item prop="nickName" :label="t('user.IDtype')" labelWidth="200rpx">
						<input v-model="state.identificationTitle" disabled placeholder-class="input-placeholder-class"
							placeholder="请选择" />
					</u-form-item>
					<u-line class="custom-line"></u-line>
					<u-form-item prop="real_name" :label="t('user.cardUserName')" labelWidth="200rpx">
						<input v-model="state.real_name" placeholder-class="input-placeholder-class"
							:placeholder="t('user.cardInputName')" shape="circle" />
					</u-form-item>
					<u-line class="custom-line"></u-line>
					<u-form-item prop="id_card" :label="t('user.IDcardNum')" labelWidth="200rpx">
						<input v-model.trim="state.id_card" placeholder-class="input-placeholder-class"
							:placeholder="t('user.IDcardInputNum')" shape="circle" border="none" />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="next-btn">
			<u-button :disabled="state.btnDisable"
				:style='state.btnDisable?"background-color:#9ec0f2":"background-color:#476ffe"' class='btn-style'
				@click="handleNext">{{t('register.next')}}</u-button>
		</view>
		<!-- 弹窗 -->
		<!-- <Popup :visible="visible" btnColor="#ececec" btnText="取消">
			<view class="pop-center">
				{{t('user.reanmae')}}
			</view>
		</Popup> -->
		<u-popup @close="closepop" :show="visible" mode="center" overlayOpacity="0.4" round="20rpx">
			<view class="popup">
				<view class="pop-title">系统通知
					<view class="close-icon" @click="closepop"></view>
				</view>
				<view class="pop-main">
					<view class="pop-center">
						{{t('user.reanmae')}}
					</view>
				</view>
				<view class="pop-btn">
					<u-button :style="`background-color:${btnColor};color: ${btnColor=='#476ffe'?'#fff':'#666'}`"
						@click="closepop">取消</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import Popup from "@/components/Popup.vue";
	import {
		ref,
		reactive
	} from "vue"
	import {
		ucAuth,
		ucIdCheck
	} from '@/api/realName/realName.js'
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
uni.setNavigationBarTitle({
			title: t('user.realName')
		});
	let visible = ref(false);
	const state = reactive({
		form: {},
		rules: [],
		identificationTitle: t('user.IDcard'),
		real_name: "",
		id_card: "",
		btnDisable: false,
	});

	const checked = reactive(true);

	function handleNext() {
		// state.btnDisable = true 
		if (!state.real_name) return uni.showToast({
			title: t('user.nickName2'),
			icon: 'none',
			duration: 1500
		})
		if (!state.id_card) return uni.showToast({
			title: t('user.identificationCard'),
			icon: 'none',
			duration: 1500
		})
		ucIdCheck(state).then(res=>{
			console.log(res)
			 if(res.data.exist){
				 visible.value = true
			 }else{
				 uni.navigateTo({
				 	url: 'upload-picture?state=' + JSON.stringify(state)
				 })
			 }
			
		})
	
	}
	const closepop = () => {
		visible.value = false;
	};
</script>

<style scoped lang="less">
	page {
		background-color: #f2f4f7;
	}

	.sun-page {
		margin: 36rpx 32rpx;
	}

	.form-box {
		background-color: #ffffff;
		border-radius: 20rpx;

		.form-title {
			padding: 0 32rpx;
			height: 128rpx;
			line-height: 128rpx;
			color: #222222;
			font-size: 48rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

		.form-main {
			padding: 0 32rpx;

			.input-placeholder-class {
				font-weight: normal;
				font-size: 28rpx;
				color: #999;
				text-align: right;
			}
		}
	}

	.next-btn {
		position: fixed;
		bottom: 174rpx;
		left: 56rpx;
		width: calc(100% - 112rpx);

		.btn-style {
			border-radius: 12rpx;
			background-color: #476ffe;
			color: #fff;
		}
	}

	.pop-center {
		margin: 60rpx 0;
		text-align: center;
		color: #666666;
		font-family: '' !important;

	}


	::v-deep .u-form-item__body {
		padding: 30rpx 0;
	}

	::v-deep .uni-input-input {
		text-align: right;
	}
	
	.popup {
		position: fixed;
		top: 560rpx;
		left: 52rpx;
		width: 646rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
	}
	
	.pop-title {
		position: relative;
		height: 116rpx;
		line-height: 116rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		border-bottom: 1rpx solid #f2f4f7;
	
		.close-icon {
			position: absolute;
			top: 34rpx;
			right: 28rpx;
			width: 48rpx;
			height: 48rpx;
			background: url("@/static/imgs/arrow_back.png");
			background-size: 100% 100%;
	
		}
	}
	
	.pop-btn {
		margin: 36rpx 30rpx;
		border-radius: 12rpx;
	}
</style>